<template>
  <div>
    <transition
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <div @click="closeDialog" v-if="mask">
        <v-mask v-show="show" />
      </div>
    </transition>
    <transition
      :enter-active-class="enterClass"
      :leave-active-class="leaveClass"
    >
      <div v-show="show" class="column content" :style="{ width, height }">
        <div
          class="de cc ct"
          :style="{ background: background, borderRadius: radius }"
        >
          <slot />
        </div>
        <p v-if="closebtn" @click="closeDialog" class="ct close">
          <img src="@/assets/img/close_x.png" />
        </p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "v-dialog",
  emits: ["close"],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    mask: {
      type: Boolean,
      default: true,
    },
    closebtn: {
      type: Boolean,
      default: true,
    },
    background: {
      type: String,
      default: "#fff",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "5rem",
    },
    radius: {
      type: String,
      default: "0rem",
    },
  },
  computed: {
    enterClass() {
      return "animated bounceIn";
    },
    leaveClass() {
      return "animated fadeOut";
    },
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  margin: auto;
}
.close {
  margin-top: 0.8rem;
  img {
    width: 0.6rem;
    height: 0.6rem;
  }
}
</style>